<template>
	<div>
	  <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"  valueKey="name"></mt-picker>
	  <mt-field label="选择省份" placeholder="请选择省份" v-model="selectedAddress.province.name"></mt-field>
	  <mt-field label="选择地/市" placeholder="请选择地/市" v-model="selectedAddress.city.name"></mt-field>
	  <mt-field label="选择区/县" placeholder="请选择区/县" v-model="selectedAddress.district.name"></mt-field>
	</div>

</template>


<script>
	import { Picker , Field } from 'mint-ui';
	import myaddress from '../../static/address.json'
	export default {
		components:{
			Picker,Field 
		},
		data() {
		    return {
		      	myAddressSlots: [
		          {
		            flex: 1,
		            defaultIndex: 0,    
		            values:myaddress,  //省份数组
		            className: 'province',
		            textAlign: 'center'
		          }, {
		            divider: true,
		            content: '-',
		            className: 'slot2'
		          }, {
		            flex: 1,
		            values: myaddress[0].children,
		            className: 'city',
		            textAlign: 'center'
		          },
		          {
		            divider: true,
		            content: '-',
		            className: 'slot4'
		          },
		          {
		            flex: 1,
		            values:myaddress[0].children[0].children,
		            className: 'district',
		            textAlign: 'center'
		          }
        		],
        		selectedAddress:{
        			province:{
        				name:myaddress[0].name,
        				code:myaddress[0].code
        			},
        			city:{
        				name:myaddress[0].children[0].name,
        				code:myaddress[0].children[0].code
        			},
        			district:{
        				name:myaddress[0].children[0].children[0].name,
        				code:myaddress[0].children[0].children[0].code
        			}
        		},
		    };
  		},
		methods: {
		    onMyAddressChange(picker, values) {
		    	if (values[0]) {
		          picker.setSlotValues(1,values[0].children)
		          this.selectedAddress.province = {code : values[0].code, name : values[0].name};
        		}

        		if(values[1]){
        			picker.setSlotValues(2,values[1].children)
        			this.selectedAddress.city = {code:values[1].code,name:values[1].name}
        		}
        		if (values[2]) {
          			this.selectedAddress.district = {code : values[2].code, name : values[2].name}
        		}
      		},
		},
		mounted(){
			this.$nextTick(() => { 
        		this.myAddressSlots[0].defaultIndex = 0   
      		});
		}
	}

</script>

<style>
	

</style>